<template>
	<div class="devtool-metadata-container">
		<el-dialog title="修改元数据" v-model="isShowDialog" width="65%">
			<el-tabs v-model="tabs.active">
				<el-tab-pane label="基本信息" name="basic">
					<el-form ref="editGentableFormRef" :model="formData" :rules="formRules" label-width="100px">
						<el-row :gutter="35">
							<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
								<el-form-item label="库表名称" prop="tableName">
									<el-input v-model="formData.tableName" placeholder="请输入库表名称,只允许英文字母或下划线组成的2~32个字符" clearable></el-input>
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
								<el-form-item label="库表描述" prop="tableComment">
									<el-input v-model="formData.tableComment" placeholder="请输入库表描述，例如 学生信息表" clearable></el-input>
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
								<el-form-item label="实体类名称" prop="className">
									<el-input v-model="formData.className" placeholder="请输入实体类名称(首字母大写),只允许英文字母组成驼峰式的2~32个字符" clearable></el-input>
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
								<el-form-item label="作者名称" prop="functionAuthor">
									<el-input v-model="formData.functionAuthor" placeholder="请输入作者名称" clearable></el-input>
								</el-form-item>
							</el-col>
							<el-col>
								<el-form-item label="项目包路径" prop="packageName">
									<el-input v-model="formData.packageName" placeholder="请输入项目包路径，例如 com.daffodil.myapp" clearable></el-input>
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
								<el-form-item label="功能描述" prop="functionName">
									<el-input v-model="formData.functionName" placeholder="请输入功能描述，例如 学生信息" clearable></el-input>
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
								<el-form-item label="工程上下文" prop="functionApi">
									<el-input v-model="formData.functionApi" placeholder="工程上下文，例如 myapp"> </el-input>
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
								<el-form-item label="模块名称" prop="moduleName">
									<el-input v-model="formData.moduleName" placeholder="请输入模块名称，例如 school" clearable></el-input>
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
								<el-form-item label="业务名称" prop="businessName">
									<el-input v-model="formData.businessName" placeholder="请输入业务名称，例如 student" clearable></el-input>
								</el-form-item>
							</el-col>
							<el-col>
								<el-form-item label="备注" prop="remark">
									<el-input type="textarea" v-model="formData.remark" placeholder="请输入备注" clearable></el-input>
								</el-form-item>
							</el-col>
							<el-col>
								<el-descriptions title="项目工程包预览" column="1" border>
									<el-descriptions-item label="Entity">{{formData.packageName || 'com.daffodil.myapp'}}.entity.{{formData.className || 'Student'}}</el-descriptions-item>
									<el-descriptions-item label="Controller">{{formData.packageName || 'com.daffodil.myapp'}}.controller.{{formData.className || 'Student'}}Controller</el-descriptions-item>
									<el-descriptions-item label="Interface">{{formData.packageName || 'com.daffodil.myapp'}}.service.I{{formData.className || 'Student'}}Service</el-descriptions-item>
									<el-descriptions-item label="Service">{{formData.packageName || 'com.daffodil.myapp'}}.service.impl.{{formData.className || 'Student'}}ServiceImpl</el-descriptions-item>
									<el-descriptions-item label="Api-list"><el-tag>GET</el-tag> /api-{{formData.functionApi || 'xxxx'}}/{{formData.moduleName || 'school'}}/{{formData.businessName || 'student'}}/list</el-descriptions-item>
									<el-descriptions-item label="Api-info"><el-tag>GET</el-tag> /api-{{formData.functionApi || 'xxxx'}}/{{formData.moduleName || 'school'}}/{{formData.businessName || 'student'}}/info</el-descriptions-item>
									<el-descriptions-item label="Api-add"><el-tag>POST</el-tag> /api-{{formData.functionApi || 'xxxx'}}/{{formData.moduleName || 'school'}}/{{formData.businessName || 'student'}}/add</el-descriptions-item>
									<el-descriptions-item label="Api-edit"><el-tag>POST</el-tag> /api-{{formData.functionApi || 'xxxx'}}/{{formData.moduleName || 'school'}}/{{formData.businessName || 'student'}}/edit</el-descriptions-item>
									<el-descriptions-item label="Api-remove"><el-tag>POST</el-tag> /api-{{formData.functionApi || 'xxxx'}}/{{formData.moduleName || 'school'}}/{{formData.businessName || 'student'}}/remove</el-descriptions-item>
								</el-descriptions>
							</el-col>
						</el-row>
					</el-form>
				</el-tab-pane>
				<!-- 字段信息 -->
				<el-tab-pane label="字段信息" name="field">
					<el-form ref="editGentableColumnFormRef" :model="formData" label-width="60px">
						<draggable :list="formData.columns">
							<template #item="{ element,index }">
								<el-row :gutter="35" class="pl20 pr20">
									<el-col :xs="1" :sm="1" :md="1" :lg="1" :xl="1">
										<el-button type="primary" icon="el-icon-plus" circle @click="onAddRow" v-if="index === 0"></el-button>
										<el-button type="danger" icon="el-icon-delete" circle @click="onDelRow(index)" v-else></el-button>
									</el-col>
									<el-col :xs="23" :sm="11" :md="5" :lg="5" :xl="5">
										<el-form-item label="名称" :rules="[{ required: true, message: `名称不能为空`, trigger: 'blur' }]">
											<el-input v-model="element.columnName" placeholder="请输入名称"> </el-input>
										</el-form-item>
									</el-col>
									<el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
										<el-form-item label="字段" :rules="[{ required: true, message: `字段不能为空`, trigger: 'blur' }]">
											<el-input v-model="element.javaField" placeholder="请输入字段"> </el-input>
										</el-form-item>
									</el-col>
									<el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
										<el-form-item label="描述" :rules="[{ required: true, message: `描述不能为空`, trigger: 'blur' }]">
											<el-input v-model="element.columnComment" placeholder="请输入列描述"> </el-input>
										</el-form-item>
									</el-col>
									<el-col :xs="23" :sm="11" :md="5" :lg="5" :xl="5">
										<el-form-item label="类型" :rules="[{ required: true, message: `类型不能为空`, trigger: 'change' }]">
											<el-select v-model="element.columnType" placeholder="请选择类型" class="w100">
												<el-option key="String" label="String" value="String"></el-option>
												<el-option key="Integer" label="Integer" value="Integer"></el-option>
												<el-option key="Long" label="Long" value="Long"></el-option>
												<el-option key="Double" label="Double" value="Double"></el-option>
												<el-option key="Date" label="Date" value="Date"></el-option>
											</el-select>
										</el-form-item>
									</el-col>
									<el-col :xs="1" :sm="1" :md="1" :lg="1" :xl="1">
										<el-button icon="el-icon-sort" circle size="mini" @click="element.isShow=false" v-if="element.isShow"></el-button>
										<el-button icon="el-icon-sort" circle size="mini" @click="element.isShow=true" v-else></el-button>
									</el-col>
									
									<el-col v-if="element.isShow" :xs="12" :sm="6" :md="4" :lg="4" :xl="3">
										<el-form-item label="主键">
											<el-switch v-model="element.isPk" active-text="是" inactive-text="否" active-value="Y" inactive-value="N"/>
										</el-form-item>
									</el-col>
									<el-col v-if="element.isShow && element.isPk == 'Y'" :xs="12" :sm="6" :md="4" :lg="4" :xl="3">
										<el-form-item label="策略">
											<el-select v-model="element.columnIdentifier" placeholder="主键生成策略">
												<el-option key="NONE" label="空" value="NONE"></el-option>
												<el-option key="uuid" label="uuid" value="uuid"></el-option>
												<el-option key="uuid2" label="uuid2" value="uuid2"></el-option>
												<el-option key="guid" label="guid" value="guid"></el-option>
												<el-option key="identity" label="identity" value="identity"></el-option>
												<el-option key="sequence" label="sequence" value="sequence"></el-option>
												<el-option key="snowflake" label="snowflake" value="snowflake"></el-option>
											</el-select>
										</el-form-item>
									</el-col>
									<el-col v-if="element.isShow" :xs="12" :sm="6" :md="4" :lg="4" :xl="3">
										<el-form-item label="必填">
											<el-switch v-model="element.isRequired" active-text="是" inactive-text="否" active-value="Y" inactive-value="N"/>
										</el-form-item>
									</el-col>
									<el-col v-if="element.isShow" :xs="12" :sm="6" :md="4" :lg="4" :xl="3">
										<el-form-item label="新增">
											<el-switch v-model="element.isInsert" active-text="是" inactive-text="否" active-value="Y" inactive-value="N"/>
										</el-form-item>
									</el-col>
									<el-col v-if="element.isShow" :xs="12" :sm="6" :md="4" :lg="4" :xl="3">
										<el-form-item label="修改">
											<el-switch v-model="element.isEdit" active-text="是" inactive-text="否" active-value="Y" inactive-value="N"/>
										</el-form-item>
									</el-col>
									<el-col v-if="element.isShow" :xs="12" :sm="6" :md="4" :lg="4" :xl="3">
										<el-form-item label="查询">
											<el-switch v-model="element.isQuery" active-text="是" inactive-text="否" active-value="Y" inactive-value="N"/>
										</el-form-item>
									</el-col>
									<el-col v-if="element.isShow" :xs="12" :sm="6" :md="4" :lg="4" :xl="3">
										<el-form-item label="列表">
											<el-switch v-model="element.isList" active-text="是" inactive-text="否" active-value="Y" inactive-value="N"/>
										</el-form-item>
									</el-col>
									<el-col v-if="element.isShow" :xs="12" :sm="6" :md="4" :lg="4" :xl="3">
										<el-form-item label="匹配">
											<el-select v-model="element.queryType" placeholder="匹配方式">
												<el-option key="NONE" label="空" value="NONE"></el-option>
												<el-option key="LIKE" label="%?%" value="LIKE"></el-option>
												<el-option key="EQ" label="=" value="EQ"></el-option>
												<el-option key="NEQ" label="!=" value="NEQ"></el-option>
												<el-option key="LEQ" label="<=" value="LEQ"></el-option>
												<el-option key="LT" label=">" value="LT"></el-option>
												<el-option key="REQ" label=">=" value="REQ"></el-option>
												<el-option key="RT" label=">" value="RT"></el-option>
											</el-select>
										</el-form-item>
									</el-col>
									<el-col v-if="element.isShow" :xs="12" :sm="6" :md="4" :lg="4" :xl="3">
										<el-form-item label="组件">
											<el-select v-model="element.htmlType" placeholder="组件类型">
												<el-option key="input" label="input" value="input"></el-option>
												<el-option key="textarea" label="textarea" value="textarea"></el-option>
												<el-option key="select" label="select" value="select"></el-option>
												<el-option key="radio" label="radio" value="radio"></el-option>
												<el-option key="checkbox" label="checkbox" value="checkbox"></el-option>
												<!-- <el-option key="datetime" label="datetime" value="datetime"></el-option> -->
											</el-select>
										</el-form-item>
									</el-col>
									<el-col v-if="element.isShow" :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
										<el-form-item label="字典">
											<el-input v-model="element.dictType" placeholder="如 sys_data_status"> </el-input>
										</el-form-item>
									</el-col>
									<el-divider style="margin-top: 0;"></el-divider>
								</el-row>
							</template>
						</draggable>
					</el-form>
				</el-tab-pane>
				<!-- 生成信息 -->
				<el-tab-pane label="生成信息" name="generator">
					<el-form ref="tplGentableFormRef" :model="formData" :rules="formRules" label-width="150px">
						<el-row :gutter="35">
							<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
								<el-form-item label="代码模板" prop="tplCodehouse">
									<el-select v-model="formData.tplCodehouse" placeholder="请选择代码模板">
										<el-option 
											v-for="item in namespaces"
											:key="item.dictValue"
											:label="item.dictName"
											:value="item.dictValue">
										</el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
								<el-form-item label="表格模板" prop="tplCategory">
									<el-select v-model="formData.tplCategory" placeholder="请选择表格模板">
										<el-option key="crud" label="数据列表" value="crud"></el-option>
										<el-option key="tree" label="树形列表" value="tree"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
								<el-form-item label="运行容器" prop="tplContainer">
									<el-select v-model="formData.tplContainer" placeholder="请选择运行容器">
										<el-option key="webflux" label="webflux" value="webflux"></el-option>
										<el-option key="webmvc" label="webmvc" value="webmvc"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col v-if="formData.tplCategory == 'tree'" :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
								<el-form-item label="树节点显示字段" prop="treeName">
									<el-select v-model="formData.treeName" placeholder="请选择树节点显示字段">
										<el-option v-for="item in formData.columns"
											:key="item.javaField"
											:label="`${item.javaField} : ${item.columnComment}`"
											:value="item.javaField"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col v-if="formData.tplCategory == 'tree'" :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
								<el-form-item label="树主编码字段" prop="treeCode">
									<el-select v-model="formData.treeCode" placeholder="请选择树主编码字段">
										<el-option v-for="item in formData.columns"
											:key="item.javaField"
											:label="`${item.javaField} : ${item.columnComment}`"
											:value="item.javaField"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col v-if="formData.tplCategory == 'tree'" :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
								<el-form-item label="树父编码字段" prop="treeParentCode">
									<el-select v-model="formData.treeParentCode" placeholder="请选择树父编码字段">
										<el-option v-for="item in formData.columns"
											:key="item.javaField"
											:label="`${item.javaField} : ${item.columnComment}`"
											:value="item.javaField"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</el-tab-pane>
			</el-tabs>
			
			<template>
				<el-dialog v-model="isShowGenTableColumDialog" title="选择元数据" append-to-body >
					<div class="devtool-metadata-container">
						<el-card shadow="hover" class="mb10" v-auth="'devtool:metadata:list'">
							<el-form :inline="true" :model="search">
								<el-form-item>
									<el-input v-model="search.columnName" placeholder="请输入元数据名称" prefix-icon="el-icon-search"></el-input>
								</el-form-item>
								<el-form-item>
									<el-input v-model="search.columnComment" placeholder="请输入元数据描述" prefix-icon="el-icon-search"></el-input>
								</el-form-item>
								<el-form-item>
									<el-button icon="el-icon-search" type="primary" @click="onTableSearch()">查询</el-button>
									<el-button icon="el-icon-refresh" @click="onResetSearch()">重置</el-button>
								</el-form-item>
							</el-form>
						</el-card>
						<el-card shadow="hover">
							<el-table ref="tableMetadataRef" :data="tableData.data" style="width: 100%" row-key="id">
								<el-table-column type="index" align="cneter" width="50" show-overflow-tooltip></el-table-column>
								<el-table-column label="元数据名称" prop="columnName" show-overflow-tooltip></el-table-column>
								<el-table-column label="元数据描述" prop="columnComment" show-overflow-tooltip></el-table-column>
								<el-table-column label="元数据类型" show-overflow-tooltip width="120">
									<template #default="scope">
										<span v-if="scope.row.columnType == 'String'" class="color-primary">字符串(String)</span>
										<span v-else-if="scope.row.columnType == 'Integer'" class="color-primary">整数(Integer)</span>
										<span v-else-if="scope.row.columnType == 'Long'" class="color-primary">长整数(Long)</span>
										<span v-else-if="scope.row.columnType == 'Double'" class="color-primary">浮点数(Double)</span>
										<span v-else-if="scope.row.columnType == 'Date'" class="color-primary">时间(Date)</span>
										<span v-else class="color-primary">{{scope.row.columnType}}</span>
									</template>
								</el-table-column>
								<el-table-column label="备注" prop="remark" show-overflow-tooltip></el-table-column>
								<el-table-column label="操作" show-overflow-tooltip width="80">
									<template #default="scope">
										<el-button size="mini" type="text" @click="onSelectMetadata(scope.row)">添加</el-button>
									</template>
								</el-table-column>
							</el-table>
							<el-pagination
								@size-change="onPageSizeChange"
								@current-change="onPageCurrentChange"
								class="mt15"
								:pager-count="5"
								:page-sizes="[10, 20, 30, 40, 50, 60]"
								v-model:current-page="search.pageNum"
								background
								v-model:page-size="search.pageSize"
								layout="total, sizes, prev, pager, next, jumper"
								:total="tableData.total"
							>
							</el-pagination>
						</el-card>
					</div>
					<template #footer>
						<span class="dialog-footer">
							<el-button @click="isShowGenTableColumDialog = false">取 消</el-button>
						</span>
					</template>
				</el-dialog>
			</template>
			
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel">取 消</el-button>
					<el-button type="primary" @click="onSubmit">保 存</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts">
import { reactive, toRefs, ref } from 'vue';
import { ElMessage } from 'element-plus';
import draggable from 'vuedraggable';
import { editGentable } from '/@/api/devtool/gentable/index';
import { getMetadataList } from '/@/api/devtool/metadata/index';
import { getGencolumnList, addGencolumn } from '/@/api/devtool/gencolumn/index';
import { getDictionaryByLabel } from '/@/api/system/dictionary/index';

export default {
	name: 'devtool/gentable/edit',
	components: { draggable },
	setup(props, context) {
		const editGentableFormRef = ref();
		const editGentableColumnFormRef = ref();
		const tableMetadataRef = ref();
		const validTableName = (rule: any, value: any, callback: any) => {
			if(!value){
				return callback(new Error('库表名称不能为空'));
			}
			if(!/^[a-zA-Z][a-zA-Z_]{1,32}$/.test(value)){
				return callback(new Error('只允许英文字母或下划线组成的2~32个字符'));
			}
			callback();
		}
		const validClassName = (rule: any, value: any, callback: any) =>{
			if(!value){
				return callback(new Error('实体类名称不能为空'));
			}
			if(!/^[A-Z][a-zA-Z]{1,32}$/.test(value)){
				return callback(new Error('只允许英文字母(首字母大写)组成驼峰式的2~32个字符'));
			}
			callback();
		}
		const validPackageName = (rule: any, value: any, callback: any) =>{
			if(!value){
				return callback(new Error('项目包路径不能为空'));
			}
			if(!/^[a-zA-Z][a-zA-Z\.]{1,128}$/.test(value)){
				return callback(new Error('只允许英文字母和小圆点分割组成的2~128个字符'));
			}
			callback();
		}
		const validModuleName = (rule: any, value: any, callback: any) => {
			if(!value){
				return callback(new Error('模块名称不能为空'));
			}
			if(!/^[a-zA-Z][a-zA-Z]{1,32}$/.test(value)){
				return callback(new Error('只允许英文字母组成的2~32个字符'));
			}
			callback();
		}
		const validBusinessName = (rule: any, value: any, callback: any) => {
			if(!value){
				return callback(new Error('业务名称不能为空'));
			}
			if(!/^[a-zA-Z][a-zA-Z_]{1,32}$/.test(value)){
				return callback(new Error('只允许英文字母组成的2~32个字符'));
			}
			callback();
		}
		const state = reactive({
			isShowDialog: false,
			isShowGenTableColumDialog: false,
			tabs: {
				active: 'basic'
			},
			namespaces: [],
			formData: {
				tplCodehouse: 'tpl-vue1',
			},
			formRules : {
				tableName: { required: true, validator: validTableName, trigger: 'blur' },
				tableComment: { required: true, message: '库表描述不能为空', trigger: 'blur' },
				className: { required: true, validator: validClassName, trigger: 'blur' },
				functionAuthor: { required: true, message: '作者名称不能为空', trigger: 'blur' },
				packageName: { required: true, validator: validPackageName, trigger: 'blur' },
				functionApi: { required: true, message: '工程上下文不能为空', trigger: 'blur' },
				moduleName: { required: true, validator: validModuleName, trigger: 'blur' },
				businessName: { required: true, validator: validBusinessName, trigger: 'blur' },
				functionName: { required: true, message: '功能名称不能为空', trigger: 'blur' },
			},
			search:{
				columnName: undefined,
				columnComment: undefined,
				orderBy: 'columnName',
				isAsc: 'asc',
				pageNum: 1,
				pageSize: 10
			},
			tableData: {
				data: [],
				total: 0,
				loading: false
			}
		});
		// 打开弹窗
		const openDialog = (row: any) => {
			state.isShowDialog = true;
			if(row){
				state.formData = Object.assign({}, row);
				getGencolumnList({tableId: state.formData.id}).then((res) => {
					if(res.code === 0){
						state.formData.columns = res.data;
						if(state.formData.columns.length == 0){
							state.formData.columns = [];
							state.formData.columns.push({
								tableId: state.formData.id,
								columnName: 'id',
								columnComment: '主键编号',
								columnType: 'String',
								javaField: 'id',
								isPk: 'Y',
								columnIdentifier: 'uuid',
								isRequired: 'Y',
								isInsert: 'N',
								isEdit: 'N',
								isList: 'N',
								isQuery: 'N',
								queryType: 'NONE',
								htmlType: 'input',
								dictType: '',
								isShow : false
							});
							state.formData.columns.push({
								tableId: state.formData.id,
								columnName: 'name',
								columnComment: '名称',
								columnType: 'String',
								javaField: 'name',
								isPk: 'N',
								columnIdentifier: '',
								isRequired: 'Y',
								isInsert: 'Y',
								isEdit: 'Y',
								isList: 'Y',
								isQuery: 'Y',
								queryType: 'LIKE',
								htmlType: 'input',
								dictType: '',
								isShow : false
							});
							state.formData.columns.push({
								tableId: state.formData.id,
								columnName: 'remark',
								columnComment: '备注',
								columnType: 'String',
								javaField: 'remark',
								isPk: 'N',
								columnIdentifier: '',
								isRequired: 'N',
								isInsert: 'Y',
								isEdit: 'Y',
								isList: 'Y',
								isQuery: 'N',
								queryType: 'LIKE',
								htmlType: 'textarea',
								dictType: '',
								isShow : false
							});
						}
					}
				});
				//加载模板
				getDictionaryByLabel({dictLabel: 'sys_template_namespace'}).then((res: any) => {
					if(res.code == 0){
						state.namespaces = res.data;
					}
				});
			}
		};
		// 关闭弹窗
		const closeDialog = (row?: object) => {
			state.isShowDialog = false;
			for(var key in state.formData) {
				state.formData[key] = undefined;
			}
			editGentableFormRef.value.resetFields();
		};
		// 取消
		const onCancel = () => {
			closeDialog();
		};
		// 保存
		const onSubmit = () => {
			editGentableFormRef.value.validate(valid => {
				if(valid){
					let params = {
						id: state.formData.id,
						tableName: state.formData.tableName,
						tableComment: state.formData.tableComment,
						className: state.formData.className,
						functionAuthor: state.formData.functionAuthor,
						packageName: state.formData.packageName,
						functionApi: state.formData.functionApi,
						moduleName: state.formData.moduleName,
						businessName: state.formData.businessName,
						functionName: state.formData.functionName,
						remark: state.formData.remark,
						tplCodehouse: state.formData.tplCodehouse,
						tplCategory: state.formData.tplCategory,
						tplContainer: state.formData.tplContainer,
						treeName: state.formData.treeName,
						treeCode: state.formData.treeCode,
						treeParentCode: state.formData.treeParentCode,
					}
					editGentable(params).then((res) => {
						if(res.code === 0){
							addGencolumn(state.formData.columns).then((res) => {
								ElMessage.success('保存成功');
								context.emit('submit');
								closeDialog(); // 关闭弹窗
							});
						}
					});
				}
			});
		};
		
		// 新增行
		const onAddRow = () => {
			state.isShowGenTableColumDialog = true;
			loadTableData();
		};
		// 删除行
		const onDelRow = (k) => {
			state.formData.columns.splice(k, 1);
		};
		const loadTableData = (params) => {
			getMetadataList(Object.assign(state.search, params)).then((res) => {
				if(res.code == 0){
					state.tableData.data = res.data;
					state.tableData.total = res.total;
					tableMetadataRef.value.clearSelection();
				}
			});
		}
		
		//查询
		const onTableSearch = () => {
			loadTableData(state.search);
		}
		//重置
		const onResetSearch = () => {
			state.search.columnName = undefined;
			state.search.columnComment = undefined;
			state.search.pageNum = 1;
			state.search.pageSize = 10;
			loadTableData(state.search);
		}
		// 每页显示数据大小改变
		const onPageSizeChange = (val: number) => {
			state.search.pageSize = val;
			loadTableData(state.search);
		};
		// 页码改变
		const onPageCurrentChange = (val: number) => {
			state.search.pageNum = val;
			loadTableData(state.search);
		};
		//选择元数据
		const onSelectMetadata = (row: object) => {
			state.formData.columns.push({
				tableId: state.formData.id,
				columnName: camelCaseToUnderline(row.columnName),
				columnComment: row.columnComment,
				columnType: row.columnType,
				javaField: row.columnName,
				isPk: 'N',
				columnIdentifier: '',
				isRequired: 'N',
				isInsert: 'Y',
				isEdit: 'Y',
				isList: 'Y',
				isQuery: 'N',
				queryType: 'NONE',
				htmlType: 'input',
				dictType: '',
				isShow : false
			});
		}
		//驼峰转下划线
		const camelCaseToUnderline = (str: string) => {
			return str.replace(/[A-Z]/g, function(s){
					return '_' + s.toLowerCase();
				}).trim();
		}

		// 阻止部分浏览器默认拖拽行为
		document.body.ondrop = (event) => {
			event.preventDefault();
			event.stopPropagation();
		};
		
		return {
			editGentableFormRef,
			editGentableColumnFormRef,
			tableMetadataRef,
			openDialog,
			closeDialog,
			onCancel,
			onSubmit,
			onAddRow,
			onDelRow,
			onTableSearch,
			onResetSearch,
			onPageSizeChange,
			onPageCurrentChange,
			onSelectMetadata,
			...toRefs(state),
		};
	},
};
</script>
